<!--
 * @authors 沙洲 chenchenyixin@qq.com http://gitee.com/shazhou
 * @date    2019-12-24 17:19:53
-->

<template>
  <section :class="[panelClass,cname]">
  	<h4 class="border-bottom">
      —— {{title}} ——
      <span v-if="more" class="more">
        {{more}}
        <nut-icon class="moreIcon"  type="more" :size="moreSize"></nut-icon>
      </span>
    </h4>
  	<slot></slot>
  </section>
</template>

<script>
export default {
  name: 'panel',
  data(){
	  return{
	  	panelClass:'panel'
	  }
  },
  props:{
  	cname:{
  		type:String,
  		default:''
  	},
  	title:{
  		type:String,
  		default:''
  	},
    more:String,
    moreSize:String
  },
  components:{

  },
  created(){

  },
  mounted(){

  },
  methods:{

  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/stylus/mixins.styl'
.panel
  panel()
  h4
    .more
      list(flex,row)
      justify-content:center
      align-items:center
      color:#999
      font-size:12px
      position:absolute
      right:10px
      top:0
      .moreIcon
        margin-left:5px
</style>


